import { hyRequest } from '@/service'
import store from '@/store'
import { useStoreDispatch, useStoreSelect } from '@/store/hook'
import { changeMessage } from '@/store/modules/counter'
import React, { memo, useEffect } from 'react'
import type { ReactNode, FC } from 'react'
import { shallowEqual } from 'react-redux'
interface IProps {
  children?: ReactNode
}
type RootType = typeof store.getState // 返回的函数类型，不是我们要的
type IRootStore = ReturnType<RootType> // 拿到返回的类型
const Recommend: FC<IProps> = () => {
  useEffect(() => {
    hyRequest
      .get({
        url: '/banner'
      })
      .then((result) => {
        console.log('result: ', result)
      })
  }, [])
  const { count, message } = useStoreSelect((store: IRootStore) => {
    return {
      count: store.counter.count,
      message: store.counter.message
    }
  }, shallowEqual)

  const disPatch = useStoreDispatch()
  const handleClick = () => {
    console.log(888)
    disPatch(changeMessage('要注意'))
  }
  return (
    <div>
      <div>{count}</div>
      <div>{message}</div>
      <button onClick={handleClick}> 点击改变数字</button>
    </div>
  )
}

export default memo(Recommend)
